<template>
  <div>
    <!-- 上部分卡片 -->
    <el-card shadow="never">
      <!-- 表单 -->
      <el-form inline>
        <!-- 用户名 -->
        <el-form-item label="用户名">
          <el-input placeholder="输入用户名"></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="flat-right">
          <el-button type="primary" icon="Search">搜索</el-button>
          <el-button icon="Refresh">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 下部分卡片 -->
    <el-card shadow="never" class="m-t-20">
      <!-- 上部分大框 -->
      <div class="flex-right">
        <!-- 按钮框 -->
        <div>
          <el-button type="primary" icon="Plus">添加</el-button>
          <el-button icon="Delete">添加</el-button>
        </div>
        <!-- 图标狂 -->
        <div>
          <el-space>
            <el-icon :size="18">
              <Refresh />
            </el-icon>
            <el-icon :size="18">
              <Setting />
            </el-icon>
          </el-space>
        </div>
      </div>

      <!-- 表格 -->
      <el-table
        class="m-t-20"
        :data="list"
        border
        row-key="id"
        v-loading="loading"
      >
        <!-- # -->
        <el-table-column
          label="#"
          type="index"
          align="center"
        ></el-table-column>
        <!-- ID -->
        <el-table-column label="Id" prop="id" align="center"></el-table-column>
        <!-- 用户名 -->
        <el-table-column
          label="用户名"
          prop="username"
          align="center"
        ></el-table-column>
        <!-- 用户昵称 -->
        <el-table-column
          label="用户昵称"
          prop="name"
          align="center"
        ></el-table-column>
        <!-- 角色列表 -->
        <el-table-column
          label="角色列表"
          prop="roleName"
          align="center"
        ></el-table-column>
        <!-- 创建时间 -->
        <el-table-column
          label="创建时间"
          prop="createTime"
          align="center"
          sortable
        >
          <template v-slot="{ row }">
            <el-tooltip :content="row.createTime" placement="top">
              <span class="els">{{ row.createTime }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <!-- 更新时间 -->
        <el-table-column
          label="更新时间"
          prop="updateTime"
          align="center"
          sortable
        >
          <template v-slot="{ row }">
            <el-tooltip :content="row.updateTime" placement="top">
              <span class="els">{{ row.updateTime }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center" width="250">
          <el-button type="primary" link icon="User">分配角色</el-button>
          <el-button type="primary" link icon="Edit">编辑</el-button>
          <el-button type="primary" link icon="Delete">删除</el-button>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        class="m-t-20 flex-end"
      />
    </el-card>
  </div>
</template>

<script lang="ts" setup name="user">
import {
  Search,
  Refresh,
  Plus,
  Delete,
  Setting,
  Edit,
  User,
} from '@element-plus/icons-vue'
import { ref, onMounted, watch } from 'vue'
import { getUserList } from '@/api'
import type { UserList } from '@/api/acl/type'

// 当前页
const currentPage = ref(1)
// 每页条数
const pageSize = ref(5)
// 获取列表
const list = ref<UserList>([])
// 总数
const total = ref(0)
// loading
const loading = ref(false)
// 请求数据
const getList = async () => {
  loading.value = true
  const res = await getUserList(currentPage.value, pageSize.value, '')
  list.value = res.data.records
  total.value = res.data.total
  loading.value = false
}

// 调用请求
onMounted(getList)
// 更新分页器
watch([currentPage, pageSize], getList)
</script>

<style scoped lang="scss">
.el-form-item {
  margin-bottom: 0;
}
.flat-right {
  float: right;
}
.el-form--inline :deep .el-form-item {
  margin-right: 0;
}
.flex-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
}
.els {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
